<template>
  <!-- <el-table :data="tableData" height="470" border stripe style="width: 100%"> -->
  <el-table :data="tableDataFromDB.slice((currentPage - 1) * pagesize, currentPage * pagesize)" height="470" stripe style="width: 100%">
    <el-table-column prop="special" label="特殊属性" width="100" />
    <el-table-column prop="userName" label="用户名" width="100" />
    <el-table-column prop="telephone" label="电话号码" width="120" />
    <el-table-column prop="password" label="密码" width="120" />
    <el-table-column prop="realName" label="真实姓名" width="80" />
    <el-table-column prop="userRole" label="用户角色" width="80" /> 
    <el-table-column prop="lastLogin" label="上次登录时间" width="150" />
    <el-table-column prop="loginCount" label="登录次数" width="60" /> 
    <el-table-column prop="createTime" label="创建日期" width="120" />
    <el-table-column fixed="right" label="操作" width="100">
      <template #default="row">
        <!-- //该改改改按钮 -->
        <el-icon :size="30" @click="handleClick(row)" color="#626aef" :dark="isDark"><Setting /></el-icon>
        <!-- <el-icon :size="30" @click="reset(row)" color="#626aef" :dark="isDark"><Bicycle /></el-icon> -->
        <!-- 删除删按钮 -->
        <el-popconfirm title="确w定y要l删除该用户吗?" @confirm="del(row)">
          <template #reference>
            <el-icon :size="30" color="#EF3E61"><Failed /></el-icon>
          </template>
        </el-popconfirm>
        <el-popconfirm title="确认要重置密码吗?" @confirm="reset(row)">
                  <template #reference>
                    <el-button type="warning" size="small">重置密码</el-button>
                  </template>
        </el-popconfirm>
        <el-popconfirm title="确认要赋予用户特殊属性吗?该操作不可逆！" @confirm="updateSpecial(row)">
                  <template #reference>
                    <el-button type="warning" size="small" color="#99CCFF">设为特殊</el-button>
                  </template>
        </el-popconfirm>
      </template>
      <!-- //删除删按钮↑ -->
    </el-table-column>
  </el-table>
  <el-pagination
        layout="total,sizes,prev,pager,next,jumper"
        :total="tableDataFromDB.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15,20]"
        :page-size="pagesize"/>
  <!-- //增增加增的窗体↓ -->
  <el-dialog v-model="tianjiakeshi622" title="~`增加新用户" width="30%">
    <el-form label-width="120px">
      <el-form-item label="用户名_wyl">
        <el-input v-model="is_a_tianjiabianliang_622.userName" />
      </el-form-item>
       <el-form-item label="电话号码">
        <el-input v-model="is_a_tianjiabianliang_622.telephone" />
      </el-form-item>
       <el-form-item label="密码">
        <el-input v-model="is_a_tianjiabianliang_622.password" />
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="is_a_tianjiabianliang_622.realName" />
      </el-form-item>
      <el-form-item label="用户角色">
        <el-input v-model="is_a_tianjiabianliang_622.userRole" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="tianjiakeshi622 = false">wyl取消添加</el-button>
        <el-button type="primary" @click="insert()" v-model="tianjiakeshi622"
          >确认添加</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- //编辑 -->
  <el-dialog v-model="xiugaijiemian622" title="编辑" width="30%">
    <el-form label-width="120px">
      <el-form-item label="特殊属性">
        <el-input v-model="is_a_xiugaibianliang_622.special" />
      </el-form-item>
      <el-form-item label="名_wyl">
        <el-input v-model="is_a_xiugaibianliang_622.userName" />
      </el-form-item>
      <el-form-item label="电话号_wyl">
        <el-input v-model="is_a_xiugaibianliang_622.telephone" />
      </el-form-item>
      <el-form-item label="密码_wyl">
        <el-input v-model="is_a_xiugaibianliang_622.password" />
      </el-form-item>
      <el-form-item label="真名_wyl">
        <el-input v-model="is_a_xiugaibianliang_622.realName" />
      </el-form-item>
      <!-- <el-form-item label="上次登录日期_wyl">
        <el-input v-model="is_a_xiugaibianliang_622.createTime" />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="xiugaijiemian622 = false">取消</el-button>
        <el-button type="primary" @click="edit()" v-model="xiugaijiemian622"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
  <!-- //增增加增 -->
  <el-button type="primary" @click="add()" color="#00FF7F" :dark="isDark">+添加新用户</el-button>
  <font size="5" color="red" face="SimSun">第三组20006380109+王胤霖+用户管理页面</font>
</template>
<script>
import { get } from '@/utils/request'
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      currentPage: 1, //默认页码为1
      pagesize: 5, //默认一页显示10条

      xiugaijiemian622: false,//两两两两个项目的变量名和方法名要完全不同
      tianjiakeshi622: false,//添加窗体的可见性
      is_a_xiugaibianliang_622: {}, //对应了点击编辑按钮时的行数据
      is_a_tianjiabianliang_622:{},
      adg:[],//改密码变量
      tableData: [
        {
          department_id:'0',
          roomName:'王胤霖',
          floor:'1',
          departId1:'(Null)',
          departId2:'(Null)'
        }
      ],
      tableDataFromDB: [ ]
    }
  },
  //网页初始化函数 网页启动时自动执行该函数
  //res:从该url地址返回的对象
  mounted(){
      get('/getAllUsers').then((res)=>{
        console.log(res)
        this.tableDataFromDB = res.data
        console.log(this.tableDataFromDB)
      }
      )
  },
  methods: {
    reset(current_info) {
      console.log("已经进重置函数里")
      console.log(current_info.row)
      this.current_info = current_info.row
      get('/updatePassword', {
        userId: this.current_info.userId,
        password: 123456
      }).then((res) => {
      ElMessage({
        message: '重置密码成功',
        type: 'success'
      })
      window.location.reload()
      })
    },
    updateSpecial(current_info) {
      console.log("已经对用户属性修改")
      this.current_info = current_info.row
      get('/jiaSpecial', {
        userId: this.current_info.userId,
        userName: this.current_info.userName,
        realName: this.current_info.realName,
      }).then(() => {
        console.log(this.current_info)
        get('/updateSpecial',{
          userId: this.current_info.userId,
        })
      ElMessage({
        message: '赋予特殊属性成功',
        type: 'success'
      })
      window.location.reload()
      })
    },
    //改
    handleClick(data) {
      this.is_a_xiugaibianliang_622 = data.row 
      this.xiugaijiemian622 = !this.xiugaijiemian622
    },
    //删除用户
    del(shanchuzhexinxi) {
      console.log(shanchuzhexinxi)
      get('/deleteUser',{userId:shanchuzhexinxi.row.userId}).then((res) => {
        ElMessage({
          message:'用户信息删除成wyl功',
          type:'success'
        })
        window.location.reload()
      })
    },
    edit() {
      this.xiugaijiemian622 =! this.xiugaijiemian622
      //console.log(this.is_a_xiugaibianliang_622)
      //调整日期格式
      var dt = new Date(this.is_a_xiugaibianliang_622.createTime)
       let year = dt.getFullYear()
       let month = dt.getMonth() + 1
       let date = dt.getDate()
       this.is_a_xiugaibianliang_622.createTime = year + '/' + month + '/' + date
       this.is_a_xiugaibianliang_622.lastLogin = year + '/' + month + '/' + date
       //lastLogin

       get('/updateUser', this.is_a_xiugaibianliang_622).then((res) => {
       console.log(res)
      ElMessage({
        message: 'wylwyl修改成功!',
        type: 'success'
      })
      
    })
    },
    add() {//未绑定变量
      this.tianjiakeshi622 = !this.tianjiakeshi622
    },
    handleSizeChange (size) {
      console.log(size,'size');
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange (currentPage) {
      console.log(currentPage,'currentPage');// <font size="5" color="green" face="SimSun">王胤霖的👉医生管理页面</font>
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
//增增加增
    insert(){//参数d
      this.tianjiakeshi622 =! this.tianjiakeshi622
      get('/addUser',this.is_a_tianjiabianliang_622).then((res) => {
        console.log(res.data)
        ElMessage({
          message:'用户信息添加成功',
          type:'success'
        })
        window.location.reload()
      })
    }
  }
}
</script>

